@use "var.scss" as *;
@use "global.scss" as *;
@use "sass:math";

@font-face {
    font-family: "XingCaoGBT";
    src: url("../assets/fonts/GEETYPE-XingCaoGBT.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Fredericka";
    src: url("../assets/fonts/Fredericka-the-great.ttf");
    font-weight: normal;
    font-style: normal;
}

body {
    font-size: $base-font-size; // 设置整个页面的基础字体大小
}

.header-container {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 50vh;
}

// 背景图
.header-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    min-height: 25rem;
    z-index: 1;
    background-image: url("https://static.linhaojun.top/aurora/articles/f7963a082ffe11e411b1514e4c35337c.jpg");
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out;
}

.brand {
    z-index: 2;
    position: fixed;
    top: 15vh;
    padding: 3rem 5rem 0 0;
    text-align: center;
    width: 100%;
    height: 50vh;
    min-height: 10rem;
    background-color: transparent;
    color: $color-white;

    .pjax {
        .logo {
            border: none;
            color: currentColor;
            outline: 0;
            text-decoration: none;
            overflow-wrap: break-word;
            word-wrap: break-word;
            transition: all 0.2s ease-in-out 0s;
            cursor: pointer;

            .artboard {
                font-family: "Fredericka", Mulish, -apple-system, "PingFang SC",
                    "Microsoft YaHei", sans-serif;
                font-size: 3.5em;
                line-height: 1.2;
                margin-bottom: 2rem;
            }

            .title {
                font-size: 2.5rem;
                font-family: "XingCaoGBT", "Microsoft YaHei", sans-serif;
            }
        }

        .meta {
            margin: 1.5rem auto 0;
            padding: 0 3rem;
        }
    }
}

/* 在手机屏幕上隐藏导航栏 */
//@media (max-width: 768px) {
//  .navbar {
//    display: none;
//  }
//
//  .navbar.show {
//    display: block;
//  }
//}

// 导航栏使用的渐变色
.gradient-background {
    background: linear-gradient(to bottom, #e4fdf5, #fee7fa);
    color: $color-black !important;
}

.day-mode .gradient-background {
    background: linear-gradient(to bottom, #e4fdf5, #fee7fa);
    color: #21252b;
}

.night-mode .gradient-background {
    background: linear-gradient(to bottom, rgb(5, 5, 5), rgb(66, 64, 64));
    color: #ffffff !important;
}

// 导航栏
.the-header {
    position: fixed;
    @include layout;
    width: 100%;
    height: $header-height;
    line-height: $header-height;
    padding: $header-padding;
    margin: $header-margin;
    background-color: transparent;
    color: $color-white;
    //   @include box-shadow($box-shadow);
    box-sizing: border-box;
    z-index: 100;
    transition: background-color 0.3s ease;

    @media screen and (max-width: 768px) {
        /* 在手机端应用不同的样式 */
        display: flex;
        justify-content: space-between;
        /* 让两个元素分别位于容器两边 */
        height: auto;
        /* 移动端导航栏高度自适应内容 */
        text-align: center;
        padding: 0 1rem;
        margin: 0;
        /* 文本居中显示 */
    }
}

// logo
.header-logo {
    margin: $header-logo-margin;
    font-size: $font-size-logo;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;

    //   logo的图标
    .icon {
        @include icon((math.div($header-height * 1, 3) * 2), inherit);
        vertical-align: middle;
    }

    // logo的文字
    span {
        color: inherit;
    }

    @media screen and (max-width: 768px) {
        /* 在手机端应用不同的样式 */
        font-size: 1rem;
        /* 适当调整字体大小 */
        margin: 0;
        /* 移除边距，可以根据需要调整 */
    }
}

/*nav*/
.navbar {
    height: $header-height;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;

    li {
        margin: 0.625rem;
        padding: $header-nav-padding;
        font-size: $font-size-header;
        border-bottom: none;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }
}

/* 移动端布局，使用 Flex 布局 */
@media screen and (max-width: 768px) {
    .navbar {
        display: flex;
        flex-wrap: nowrap;
        /* 如果屏幕宽度不够，允许换行 */
        justify-content: space-between;
        /* 平均分配水平空间 */
    }

    .li {
        margin: 0;
        /* 移除默认边距 */
        padding: 4% 0.625rem;
        /* 设置每个li的内边距 */
        text-align: center;
    }

    .sidebar-icon {
        display: flex;
    }

    .open-sidebar {
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        transition: transform 0.3s ease; /* 添加过渡效果 */
        transform: rotate(0);
    }
    .unfold {
        transform: rotate(90deg);
    }
}

/*日月特效*/
.day-night {
    margin-left: 1rem;
    display: flex;
    align-items: center; /* 垂直方向居中对齐 */
    justify-content: center; /* 水平方向居中对齐 */
}

/* PC端样式 */

.header-search {
    @include layout;
    border-radius: $header-search-radius;
    overflow: hidden;

    input {
        height: $header-search-height;
        width: $header-search-width;
        font-size: $font-size-default;
        border: 0;
        text-indent: 0.625rem;
        background-color: $color-light-grey;

        &:focus {
            outline: none;
        }
    }

    .search-btn {
        @include layout(center, center);
        background-color: $color-blue-active;
        width: $header-search-btn-width;
        height: $header-search-btn-height;
        cursor: pointer;

        .icon {
            @include icon(0.75rem, $color-white);
        }
    }
}

/*用户*/
.header-right {
    position: absolute;
    right: 1rem;
    height: 100%;
    aspect-ratio: 1 / 1;

    /*设置宽高比为1:1 */
    #user {
        cursor: pointer;
        height: 100%;
        padding: 5%;
        aspect-ratio: 1 / 1;

        /*设置宽高比为1:1 */
        img {
            border-radius: 50%;
            aspect-ratio: 1 / 1;
            /* 设置宽高比为 1:1 */
            height: 80%;
        }
    }
}

.menu {
    display: none;
    line-height: 0rem;
    position: absolute;
    //   background-color: $color-white;
    @include box-shadow(0.0625rem 0.0625rem 0.625rem rgba(0, 0, 0, 0.4));
    width: $header-menu-width;
    padding: $header-menu-padding;
    border-radius: $header-menu-radius;
    top: $header-height + 0.625rem;
    right: -1.25rem;
    z-index: 9999;
    text-align: center;
    cursor: pointer;

    li {
        display: inline-block;
        width: 100%;
        height: 2.5rem;
        line-height: 2.5rem;

        &:hover {
            background-color: $theme-color;
            color: inherit;
        }
    }

    :nth-child(1):before {
        content: " ";
        display: block;
        /*独占一行*/
        position: absolute;
        right: 1.5625rem;
        top: -0.15625rem;
        /*果断的露出上半部分*/
        width: 0.3125rem;
        height: 0.3125rem;
        // background-color: $color-white;
        /*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*/
        transform: rotate(45deg);
    }
}

//.show {
//  display: block;
//}

.active {
    color: #fff !important;
    //border-bottom: 0.3125rem solid $theme-color !important;
    border-radius: 1rem;
    background-image: linear-gradient(
        to right,
        #bc95c6 0,
        #a7bfe8 50%,
        #7dc4cc 100%
    );
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,
        rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}

/* 侧边栏的样式 */

.sidebar {
    position: fixed;
    z-index: 1;
    top: 0;
    left: -25rem;
    /* 初始状态，将侧边栏隐藏在屏幕外，假设 1rem = 16px */
    width: 25rem;
    /* 调整宽度为 16rem，假设 1rem = 16px */
    height: 100%;
    background: linear-gradient(to bottom, #e3fdf5, #fde7f9);
    transition: left 0.3s;
}

.day-mode .sidebar {
    background: linear-gradient(to bottom, #e3fdf5, #fde7f9);
    color: #21252b;
}

.night-mode .sidebar {
    background: linear-gradient(to bottom, rgb(39, 38, 38), rgb(66, 64, 64));
    color: #ffffff;
}

.profile {
    text-align: center;
    margin-top: 2rem;
    color: $color-grey;
    min-height: 16rem;

    //   头像
    #avatar {
        width: 10rem;
        height: 10rem;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        transition: transform 0.3s ease;
        animation: rotateAvatar 10s linear infinite; /* 添加旋转动画 */
    }

    @keyframes rotateAvatar {
        from {
            transform: rotate(0deg); /* 开始时的旋转角度为0度 */
        }
        to {
            transform: rotate(360deg); /* 结束时的旋转角度为360度，即完整一圈 */
        }
    }

    #avatar:hover {
        animation: shake 0.5s;
        -webkit-animation: shake 0.5s;
    }

    @keyframes shake {
        0%,
        100% {
            transform: translateX(0);
        }

        25% {
            transform: translateX(-5px);
        }

        50% {
            transform: translateX(5px);
        }

        75% {
            transform: translateX(-5px);
        }
    }

    .artboard {
        font-family: "Fredericka the Great", Mulish, -apple-system,
            "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 3.5em;
        line-height: 1.2;
    }

    // 名称
    .title {
        // font-family: 'XingCaoGBT', "Microsoft YaHei", sans-serif;
        font-size: 2rem;
        font-weight: 500;
        background-image: linear-gradient(to right, #1de5e2, #97b0f0, #b588f7);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    // 签名
    .description {
        padding: 0.5rem 1rem;
        line-height: 2rem;
        max-height: 10rem;
        overflow: ellipsis;
        background-image: linear-gradient(to right, #d56f1b, #e89c22, #fe5679);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.sidebar-menu {
    width: 100%;
    height: 100%;
    color: $color-grey;
}

.sidebar-menu-navbar {
    /* 设置为竖向排列 */
    display: flex;
    flex-direction: column;
    /**
  让元素在中间显示
   */
    padding: 0 5rem;

    .align-center {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }
}

.mr {
    margin-right: 0.5rem;
}

::v-deep .el-dialog {
    background: linear-gradient(to bottom, #e3fdf5, #fde7f9);
}

.night-mode .dialog-container {
    ::v-deep .el-dialog {
        background: linear-gradient(to bottom, #a3afc0, #7d8186);
    }
}

// 搜索弹出框内容的样式
.search-results-box {
    background: #f7f7f7 url("../assets/img/search.png") no-repeat bottom right;
    margin: 0.7rem 0;
    height: 53rem;
    max-height: 65vh;
    /* 设置最大高度以触发滚动条 */
    overflow: auto;
    /* 允许内容溢出时出现滚动条 */
}

.night-mode .search-results-box {
    background: rgba(38, 32, 32, 0.71) url("../assets/img/search.png") no-repeat
        bottom right;
}

.search-results-scroll {
    max-height: 100%;
    /* 使滚动条最大高度占满父容器 */
}

.result-box {
    background-color: #f1f3f9;
    // border: 0.1rem solid #ccc;
    border-radius: 0.5rem;
    padding: 0.2rem;
    margin: 0.6rem;
    text-align: center;
    cursor: pointer;
    /* 添加触碰样式，如背景色、颜色等 */
    transition: background-color 0.3s, color 0.3s;
}

.result-box:hover {
    box-shadow: 0 0 0.34rem rgba(0, 0, 0, 0.3);
    /* 添加阴影效果 */
    color: #333;
}

// 蒙版
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    overflow-x: hidden;
    transition: 0.5s;
}

// 日月特效
.night-mode .result-box {
    background-color: rgba(32, 36, 40, 0.48);
    color: #ffffff;
}

.night-mode .el-input {
    ::v-deep .el-input__inner {
        background-color: rgba(32, 36, 40, 0.48) !important;
        color: #ffffff !important;
    }
}

.night-mode .controls-container {
    .tab {
        .tab-item {
            background-color: rgba(97, 128, 162, 0.69);
        }
    }
}

// 侧边栏控制按钮容器
.controls-container {
    width: 100%;
    height: 6vh;

    .tab {
        display: flex;
        flex-wrap: nowrap;
        position: absolute;
        padding: 0 10%;
        margin: 0;
        min-height: 1.875rem;

        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;

        .tab-item {
            flex: 0 1 auto; /* 允许元素根据需要收缩或拉伸，但不会超出其初始尺寸 */
            margin: 0 0.2rem; /* 设置列表项之间的间距 */
            margin-right: 1rem;
            cursor: pointer;
            padding: 0.3125rem 0.9375rem;
            color: #999;
            border-radius: 0.625rem;
            text-align: center;
            text-decoration: none;
            background-color: rgba(0, 0, 0, 0.08);
            transition: all 0.2s ease-out 0s;

            .controls-text-box {
                height: 3rem;
                display: flex;
                align-items: center;

                .controls-text {
                    color: #fff;
                    font-size: 1rem;
                    white-space: nowrap;
                    margin-left: 0.5rem;
                }
            }
        }
    }
}

.controls-active {
    color: #fff;
    background-image: linear-gradient(to right, #ed6ea0 0, #ec8c69 100%);
    box-shadow: 0 0 0.75rem var(--color-pink-a3);
}
